<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8" import="java.util.*,java.text.SimpleDateFormat,
com.brother.model.*,com.ibatis.common.util.PaginatedList
,com.brother.util.DateFormatter,com.brother.model.AlarmType,com.brother.util.CountryLocation" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ include file="international.jsp" %>
<%
String dateFormat = (String)session.getAttribute(Constants.DATE_FORMAT_SESSION_NAME);

String extDateFormat = (String)session.getAttribute(Constants.EXT_DATE_FORMAT_SESSION_NAME);

SimpleDateFormat format = new SimpleDateFormat(dateFormat);
Calendar calendar = Calendar.getInstance();
calendar.set(Calendar.DAY_OF_MONTH, calendar.get(Calendar.DAY_OF_MONTH) - 7);

String trackerid = request.getParameter("trackerId");
%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css"  href="style.css" />
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/grid-examples.css" />
<style type="text/css">
.whitebg{
	background-color: #ffffff;
}
body{
background-color: #ffffff;
}
</style>
    <script type="text/javascript" src="js/ext-base.js"></script>
    <script type="text/javascript" src="js/ext-all.js"></script>
    <script type="text/javascript" src="./js/common.js"></script>
    <script type="text/javascript" src="./js/jscharts.js"></script>
    <%if(locale.equals("pt")){ %>
    <script type="text/javascript" src="js/locale/ext-lang-pt.js"></script>
    <%}else{ %>
    <script type="text/javascript" src="js/locale/ext-lang-en.js"></script>	
    <%} %>
</head>
<body style="min-height:100%;">
<div id="msg" name="msg" style="background-color:#D4DF55; position:absolute; z-index:11; left: 10px; top: 61px; display:inline"></div>
<script>
var waitingMsg = '<fmt:message key="waiting.msg"/>';
var waitingProgressText = '<fmt:message key="waiting.loading"/>';
function fGetXY(obj){ 
    var oTmp = obj;     
    if(!oTmp||(typeof(oTmp.offsetLeft) == "undefined") 
        ||(typeof(oTmp.offsetTop) == "undefined") 
        ||!oTmp.tagName){ 
         return null; 
    } 
    var pt = new Point(0,0);   
    do{ 
		pt.x += oTmp.offsetLeft; 
		pt.y += oTmp.offsetTop; 
		//alert(oTmp.parentNode.tagName);
		oTmp = oTmp.parentNode; 
	} while(oTmp.tagName!="BODY"); 
	return pt; 
} 

var gMsgTop = 0; //fGetXY(document.getElementById("tmp_pos")).y;
function show_tip(msg)
{
if (gMsgTop == 0)
{
	gMsgTop = fGetXY(document.getElementById("tmp_pos")).y + 5;
	document.getElementById("msg").style.top = gMsgTop;
	document.getElementById("msg").style.display = "inline";
	// alert(document.getElementById("msg").style.offsetTop);
}

document.getElementById("msg").innerHTML = msg;
}

Ext.onReady(function(){
	Ext.MessageBox.buttonText.yes = '<fmt:message key="button.yes.text"/>';
	Ext.MessageBox.buttonText.no = '<fmt:message key="button.no.text"/>';
	Ext.MessageBox.buttonText.cancel = '<fmt:message key="button.cancel.text"/>';
	
	//top.ajustProducts('<fmt:message key="tracker.info"/>', 850, 550);



	var storeTime = new Ext.data.ArrayStore({
	    fields: ['time', 'value'],
	    data : [['<fmt:message key="chart.5.minutes"/>', '5m'], ['<fmt:message key="chart.10.minutes"/>', '10m'], ['<fmt:message key="chart.20.minutes"/>', '20m'], ['<fmt:message key="chart.1.hour"/>', '1h']]
	});
	
	var comboTime = new Ext.form.ComboBox({
		store: storeTime,
        displayField:'time',
        valueField:'value',
        mode: 'local',
        emptyText:'<fmt:message key="chart.select.time"/>',
        typeAhead:false,
        editable:false,  
        allowBlank:false,
        triggerAction:'all',  
        forceSelection:true,
        width:100,
        applyTo: 'timeInterval'
    });

	var charTypes = new Ext.data.ArrayStore({
	    fields: ['type', 'value'],
	    data : [['<fmt:message key="chart.time.speed"/>', '1'], ['<fmt:message key="chart.time.mileage"/>', '2']]
	});
	var comboTypes = new Ext.form.ComboBox({
		store: charTypes,
        displayField:'type',
        valueField:'value',
        mode: 'local',
        emptyText:'<fmt:message key="chart.select"/>',
        typeAhead:false,
        editable:false,  
        allowBlank:false,
        triggerAction:'all',  
        forceSelection:true,
        width:120,
        applyTo: 'chartType',
        listeners:{'select':function(){
			if(comboTypes.getValue() == '1'){
				comboTime.setDisabled(false);
				fromDate.setDisabled(false);
				toDate.setDisabled(true);
			}else if(comboTypes.getValue() == '2'){
				comboTime.setDisabled(true);
				fromDate.setDisabled(false);
				toDate.setDisabled(false);
			}
        }}
    });

	var fromDate = new Ext.form.DateField({
        fieldLabel: '',
        width:94,
        allowBlank:false,
        format:'<%=extDateFormat%>',
        applyTo: 'from'});

	var toDate = new Ext.form.DateField({
        fieldLabel: '',
        allowBlank:false,
        width:94,
        format:'<%=extDateFormat%>',
        applyTo: 'to'}); 

	fromDate.setDisabled(true);
	toDate.setDisabled(true);
	comboTime.setDisabled(true);
	
	var button = new Ext.Button({renderTo:'okbtn',type:'button', 
		text:'<fmt:message key="button.ok"/>',split: true,width:50,
		enableToggle:false});
		button.on('click', function(){
			var time = comboTime.getValue();
			var span = comboTypes.getValue();
			var from = document.getElementById('from').value;
			var toDateText = document.getElementById('to').value;
			if(span == ''){
				Ext.MessageBox.show({
    	            title: '',
    	            msg: '<fmt:message key="chart.need.type"/>',
    	            buttons: Ext.MessageBox.OK,
    	            icon: Ext.MessageBox.WARNING
    	        });
				return;
			}
			if(span == 1){
				drawSpeed(from, time);
			}else if(span == 2){
				if(toDate.getValue().getTime() - fromDate.getValue().getTime() < 48 * 60 * 60 * 1000){
					Ext.MessageBox.show({
	    	            title: '',
	    	            msg: '<fmt:message key="chart.need.days.span"/>',
	    	            buttons: Ext.MessageBox.OK,
	    	            icon: Ext.MessageBox.WARNING
	    	        });
					return;
				}
				if(toDate.getValue().getTime() - fromDate.getValue().getTime() > 24 * 12 * 60 * 60 * 1000){
					Ext.MessageBox.show({
	    	            title: '',
	    	            msg: '<fmt:message key="chart.need.days.span"/>',
	    	            buttons: Ext.MessageBox.OK,
	    	            icon: Ext.MessageBox.WARNING
	    	        });
					return;
				}
				drawMileage(from, toDateText);
			}
		});
});

function drawSpeed(date, interval){
	showWaiting();
	Ext.Ajax.request({
	    url: './getSpeedChangeByTime.jsp',
	    params: 'date=' + date + '&interval=' + interval+'&trackerid=<%=trackerid%>',
	    success:function(res){
			if(res.status == 404 ||
				res.responseText.indexOf('setLoginInfo') != -1){
				top.location.href = '/';
				return;
			}
			Ext.MessageBox.hide();
			/*var myData = new Array([1996, 22], [1997, 36], [1998, 37], [1999, 45], [2000, 50], [2001, 55], [2002, 61], [2003, 61], [2004, 62], [2005, 66], [2006, 73],
					[1996, 22], [1997, 36], [1998, 37], [1999, 45], [2000, 50], [2001, 55], [2002, 61], [2003, 61], [2004, 62], [2005, 66], [2006, 73],
					[1996, 22], [1997, 36], [1998, 37], [1999, 45], [2000, 50], [2001, 55], [2002, 61], [2003, 61], [2004, 62], [2005, 66], [2006, 73],
					[1996, 22], [1997, 36], [1998, 37], [1999, 45], [2009, 50], [2011, 55], [2012, 61], [2013, 61], [2014, 62], [2015, 66], [2016, 73]);*/
			var lines = res.responseText.split("\n");
			var myData = eval(lines[0]);
			var myChart = new JSChart('graph', 'line');
			myChart.setDataArray(myData);
			var labels = eval(lines[1]);
			for(var k = 0; k < labels.length; k++){
				myChart.setLabelX(labels[k]);
			}
			myChart.setShowXValues(false);
			myChart.setTitle('<fmt:message key="chart.type.speed"/>');
			myChart.setTitleColor('#8E8E8E');
			myChart.setTitleFontSize(11);
			myChart.setAxisNameX('<fmt:message key="chart.type.time"/>');
			myChart.setAxisNameY('KM/H');
			myChart.setAxisColor('#C4C4C4');
			myChart.setAxisValuesColor('#343434');
			myChart.setAxisPaddingLeft(100);
			myChart.setAxisPaddingRight(120);
			myChart.setAxisPaddingTop(50);
			myChart.setAxisPaddingBottom(40);
			myChart.setAxisValuesNumberX(12);
			myChart.setGraphExtend(true);
			myChart.setGridColor('#c2c2c2');
			myChart.setLineWidth(3);
			myChart.setLineColor('#9F0505');
			myChart.setSize(700, 321);
			myChart.setBackgroundImage('chart_bg.jpg');
			myChart.draw();
			
		}});
}

function drawMileage(from, to){
	showWaiting();
	Ext.Ajax.request({
	    url: './getMileageOnTime.jsp',
	    params: 'from=' + from + '&to='+to+'&trackerid=<%=trackerid%>',
	    success:function(res){
			if(res.status == 404 ||
				res.responseText.indexOf('setLoginInfo') != -1){
				top.location.href = '/';
				return;
			}
			Ext.MessageBox.hide();
			var lines = res.responseText.split("\n");
			var myData = eval(lines[0]);
			//var myData = new Array([1996, 22], [1997, 36], [1998, 37], [1999, 45], [2000, 50], [2001, 55], [2002, 61], [2003, 61], [2004, 62], [2005, 66], [2006, 73]);
			var myChart = new JSChart('graph', 'line');
			myChart.setDataArray(myData);
			var labels = eval(lines[1]);
			for(var k = 0; k < labels.length; k++){
				myChart.setLabelX(labels[k]);
			}
			myChart.setShowXValues(false);
			myChart.setTitle('<fmt:message key="chart.type.mileage"/>');
			myChart.setTitleColor('#8E8E8E');
			myChart.setTitleFontSize(11);
			myChart.setAxisNameX('<fmt:message key="chart.mileage.axis.time"/>');
			myChart.setAxisNameY('<fmt:message key="chart.axis.mileage"/>');
			myChart.setAxisColor('#C4C4C4');
			myChart.setAxisValuesColor('#343434');
			myChart.setAxisPaddingLeft(100);
			myChart.setAxisPaddingRight(120);
			myChart.setAxisPaddingTop(50);
			myChart.setAxisPaddingBottom(40);
			myChart.setAxisValuesNumberX(12);
			myChart.setGraphExtend(true);
			myChart.setGridColor('#c2c2c2');
			myChart.setLineWidth(3);
			myChart.setLineColor('#9F0505');
			myChart.setSize(700, 321);
			myChart.setBackgroundImage('chart_bg.jpg');
			myChart.draw();

	}});
}


</script>

<table id="container" width="100%" border="0" cellpadding="0" cellspacing="0">

<tr valign="top">
	<td align="left" style="padding-left:8px; padding-right:8px; min-height:100%;">
<table width="100%">
				<tr>
					<td width="100%">
					<table class="tableNoBorder" >
					<tr>
					<td><fmt:message key="chart.type"/>:</td>
					<td><div><input style="margin-left:0px" type="text" id="chartType"/></div></td>
					<td><fmt:message key="chart.time.interval"/>:</td>
					<td width="110"><div style="padding-left:0px;"><input style="margin-left:0px;" type="text" id="timeInterval"/></div></td>
					<td><fmt:message key="report.from.date.time"/>:</td>
					<td><div><input name="createTimeFrom" id="from" type="text" value="<%=format.format(calendar.getTime()) %>" size="10" readonly="readonly" maxlength="50"  /></div></td>
					<td><fmt:message key="report.to.date.time"/>:</td>
					<td><div><input name="createTimeTo" id="to" type="text" value="<%=format.format(new Date())%>" size="10" readonly="readonly" maxlength="50" /></div></td>
					<td><div id="okbtn"></div></td>
					</tr></table>
					</td>
					</tr>
					
					</table>
					</td>
					</tr>
<tr><td valign="top" style="height:100%">
<div id="graph"></div>
</td></tr>					
					
					</table>
</body>
</html>
<%
com.brother.database.DataBase.closeThreadConnection();
%>